<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
  <head>
    <meta charset="utf-8" />
  </head>
  <body style="height: 100%; margin: 0">
    <!-- <div id="img" style="float: left; text-align: left">
      <img src="./logo2.png" alt="" style="width: 120px" />
    </div> -->
    <div id="container" style="height: 100%"></div>

    <script type="text/javascript" src="./echarts.js"></script>
    <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/extension/dataTool.min.js"></script>
  -->
    <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
    <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
    <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
  -->
    <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/extension/bmap.min.js"></script>
  -->

    <script type="text/javascript">
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom, null, {
        renderer: "canvas",
        useDirtyRect: false,
      });
      var app = {};
      var barWidth = "auto";
      var option;
      var colors = [
        "#f2ca6b",
        "#91CC75",
        "#EE6666",
        "#87e8de",
        "#08979c",
        "#2b66bd",
        "#061178",
      ];
      var labelOption = {
        show: true,
        position: "top",
        distance: 15,
        align: "center",
        formatter: function (params) {
          const { data, value } = params;
          console.log(params);
          return [`{c|${value[3]}}`, `{c|${value[2]}}`].join("\n");
        },
        fontSize: 12,
        rich: {
          a: {
            color: "red",
          },
          b: {
            color: "green",
          },
          c: {
            color: "black",
          },
        },
      };
      var orgData = {
        "中标金额（万元）": {
          一建: 25942.53,
          三箭: 87587.19,
          四建: 156048.4,
          安装: 4148.93,
          建材科技: 4650.0,
          建工集团: 190654.26,
        },
        "中标面积（平方米）": {
          一建: 76983.86,
          三箭: 221183.51,
          四建: 541395.63,
          建工集团: 523902.22,
        },
        "新签合同额（万元）": {
          一建: 121791.0,
          三箭: 105266.83,
          四建: 153750.13,
          安装: 4148.93,
          建材科技: 4650.0,
        },
      };
      function checkEmpty(orgList, preOrg, curOrg) {
        if (preOrg == undefined) {
          return orgList.indexOf(curOrg);
        } else {
          return orgList.indexOf(curOrg) - orgList.indexOf(preOrg) - 1;
        }
      }

      function renderItem(params, api) {
        var yValue = api.value(2);
        var start = api.coord([api.value(0), yValue]);
        var size = api.size([api.value(1) - api.value(0), yValue]);
        var style = api.style();

        var barWidth = 50;
        var emptyCount = api.value(4);
        var d = 0;
        if (emptyCount > 0) {
          d = -barWidth * emptyCount;
        }

        var barNum = api.value(5);
        var p = [(-barNum * barWidth) / 2, 0];
        return {
          type: "rect",
          position: p,
          shape: {
            x: start[0] + params.seriesIndex * (barWidth + 4) + d,
            y: start[1],
            width: barWidth,
            height: size[1],
          },
          style: style,
        };
      }
      var xAxisData = [];
      var dataData = [];
      var orgList = [];
      var orgCount = {};
      for (var org in orgData) {
        xAxisData.push(org);

        var odata = orgData[org];

        var num = 0;
        for (var ks in odata) {
          num++;
          if (orgList.indexOf(ks) == -1) {
            orgList.push(ks);
          }
        }

        orgCount[org] = num;
      }
      var dataMap = {};
      var count = 0;
      for (var org in orgData) {
        var odata = orgData[org];

        var preOrg = undefined;
        var preCount = 0;
        for (var ks in odata) {
          if (dataMap[ks] == undefined) {
            dataMap[ks] = [];
          }

          preCount += checkEmpty(orgList, preOrg, ks);

          dataMap[ks].push([
            count,
            count + 1,
            odata[ks],
            ks,
            preCount,
            orgCount[org],
          ]);

          preOrg = ks;
        }
        count++;
      }

      var series = [];
      for (var d in orgList) {
        var ks = orgList[d];

        var ds = dataMap[ks];

        series.push({
          data: ds,
          type: "custom",
          barWidth,
          label: labelOption,
          renderItem: renderItem,
          encode: {
            x: [0, 1],
            y: 2,
            tooltip: [3, 2],
            itemName: 3,
          },
        });
      }

      var option = {
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: true,
          top: 80,
          data: [
            { name: "一建" },
            { name: "三箭" },
            { name: "四建" },
            { name: "安装" },
            { name: "建材科技" },
            { name: "建工集团" },
          ],
        },
        xAxis: {
          type: "category",
          data: xAxisData,
        },
        yAxis: {
          type: "value",
        },
        series: series,
      };
      console.log(option);
      if (option && typeof option === "object") {
        myChart.setOption(option);
      }
      window.addEventListener("resize", myChart.resize);
    </script>
  </body>
</html>
